<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample illustrates using the {{each}} template tag,
for iterative rendering of nested markup within a template.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	.peopleTable td { border:2px solid #555; text-align:center; }
	.person{ background-color:#AFA; }
	.personAlt{ background-color:#9ED; }
	.separator { background-color:#C77; height:6px;}
	.cityseparator { background-color:#CCC; height:4px;}
	.peopleTable { border-collapse:collapse; border:2px solid #555; }
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#tmplPeople")
		.tmpl( people )
		.appendTo(".peopleTable");
});

var people = [
	{
		firstName: "John",
		lastName: "Resig",
		url: "http://ejohn.org/",
		cities: [
			{ name: "Boston", state: "MA" },
			{ name: "San Francisco", state: "CA" }
		]
	},
	{
		firstName: "Dave",
		lastName: "Reed",
		url: "http://dave.org/",
		cities: [
			{ name: "Seattle", state: "WA" },
			{ name: "Los Angeles", state: "CA" },
			{ name: "New York", state: "NY" }
		]
	},
	{
		firstName: "Boris",
		lastName: "Moore",
		url: "http://boris.org/",
		cities: [
			{ name: "Redmond", state: "WA" }
		]
	}
];

function index( item, array ) {
	return $.inArray( item, array ) + 1;
}

function getName() {
	return this.data.firstName + " " + this.data.lastName;
}

function alternate( item, array ) {
	return ($.inArray( item, array ) % 2) ? "personAlt" : "person";
}
</script>

<script id="tmplPeople" type="text/x-jquery-tmpl">
	<tr class="${alternate($data, people)}"><td colspan="2"><a href="${url}">${getName()}</a></td></tr>
	{{each cities}}
		<tr class="cityseparator"><td colspan="2"></td></tr>
		<tr class="${alternate($data, people)}"><td colspan="2"><b><i>City ${index($value, cities)}:</i></b></td></tr>
		<tr class="${alternate($data, people)}"><td><b>${name}</b></td><td>${state}</td></tr>
	{{/each}}
	<tr class="separator"><td colspan="2"></td></tr>
</script>

<table class="peopleTable"><tbody>
	<tr class="separator"><td colspan="2"></td></tr>
</tbody></table>

</body>
</html>